let pid = location.search
pid = pid.split('=')[1]
uid = localStorage.getItem('uid')
console.log(pid);
function listfn() {
    let connector = `http://jx.xuzhixiang.top/ap/api/detail.php?id=${pid}
    `;
    let xhr = new XMLHttpRequest();
    xhr.open("get", connector);
    xhr.send();
    xhr.onload = function () {
        let html = ''
        if (xhr.status === 200) {
            let obj = JSON.parse(xhr.responseText)
            console.log(obj);
            for (let i = 0; i < 1; i++) {
                // console.log(obj.data[i]);
                html += `
                <div id="particulars">
                    <!-- 小图 -->
                    <div class="particulars-pic-small">
                        <img src="${obj.data.pimg}" alt="">
                        <div class="mask"></div>
                        <!-- <div class="float_layer"></div> -->
                    </div>
                    <!-- 大图 -->
                    <div class="particulars-pic-big">
                        <img src="${obj.data.pimg}" alt="">
                    </div>
                    <!-- 详情 -->
                    <div class="particulars-content">
                        <div class="particulars-content-top">
                            <a href="https://you.163.com/item/newItem">新品</a>
                            <h3>${obj.data.pname}</h3>
                            <p>最新精选，你值得拥有</p>
                        </div>
                        <div class="particulars-content-news">
                            <h3>新品限时购</h3>
                            <div class="particulars-content-news-num">
                                活动价<span class="money">￥${obj.data.pprice}</span><span>￥${obj.data.pprice}</span>
                            </div>
                            <div class="particulars-number">
                                数量
                                <span>-</span>
                                <input type="text" value="1" class="Ipt">
                                <span>+</span>
                            </div>
                            <div class="particulars-btn">
                                <input type="button" value="立即购买">
                                <input type="button" value="加入购物车">
                            </div>
                        </div>
                    </div>
                </div>
                `
            }
        }
        //获取 li 标签
        let box = document.querySelector('#particulars-wrap')
        box.innerHTML += html


        //放大镜
        // 获取
        let Zoom = document.getElementById('particulars');
        let mask = document.querySelector('.mask');
        let big = document.querySelector('.particulars-pic-big');
        let bigimg = document.querySelector('.particulars-pic-big>img');
        let small = document.querySelector('.particulars-pic-small')
        // 鼠标移入  大图 和 mask 显示
        //  console.log(small);
        small.onmouseenter = function () {
            mask.style.display = 'block';
            big.style.display = 'block';
            console.log('mask');

            //调整比例  mask/small = big/bigImg 
            //调整比例  bigImg = big/mask  * small 
            // 大图的宽
            let bigimgWidth = big.offsetWidth * small.offsetWidth / mask.offsetWidth;
            bigimg.style.width = bigimgWidth + 'px';


            // 鼠标在小图上移动，改变mask的坐标
            small.onmousemove = function (evt) {
                // 获取鼠标在  small 中的位置
                let mouseX = evt.pageX - small.offsetLeft;
                let mouseY = evt.pageY - small.offsetTop - 125;

                console.log('mask');
                console.log(mouseX, mouseY);
                // 根据鼠标的位置  算出mask 位置
                let maskX = mouseX - mask.offsetWidth / 2;
                let maskY = mouseY - mask.offsetHeight / 2;
                // console.log( mouseY ,mask.offsetHeight / 2)
                // 限制mask 边距
                // 左
                if (maskX <= 0) {
                    maskX = 0
                }
                // 上
                if (maskY <= 50) {
                    maskY = 50
                }
                // 右
                if (maskX >= small.offsetWidth - mask.offsetWidth) {
                    maskX = small.offsetWidth - mask.offsetWidth
                }
                // 下
                console.log(maskY, small.offsetHeight, mask.offsetHeight)
                if (maskY >= small.offsetHeight - mask.offsetHeight + 50) {
                    maskY = small.offsetHeight - mask.offsetHeight + 50
                }
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';

                // 
                let bigimgX = -bigimg.offsetWidth / small.offsetWidth * maskX;
                let bigimgY = -bigimg.offsetWidth / small.offsetWidth * (maskY - 50);
                bigimg.style.left = bigimgX + 'px';

                bigimg.style.top = bigimgY + 'px';
            }

        }



        // 移出  隐藏
        small.onmouseleave = function () {
            big.style.display = 'none';
            mask.style.display = 'none';
        }

        // 调用接口
        // let s = new URLSearchParams(window.location.search);
        // var id = s.get('id');
        // console.log(id);
        // let url = 'http://jx.xuzhixiang.top/ap/api/detail.php';
        // let pic = document.getElementById("pic")
        // let tit = document.getElementById("tit")
        // let maoyeye = document.getElementById("maoyeye")
        // axios.get(url, {
        //     params: {
        //         id
        //     }
        // }).then(res => {
        //     var arr = res.data.data
        //     pic1.src = arr.pimg;
        //     pic2.src = arr.pimg;
        //     tit.innerText = arr.pname;
        //     maoyeye.innerHTML = "￥" + arr.pprice;
        // })






        //  +  -   按钮
        let input = document.querySelector('.Ipt')
        console.log(input);
        input.oninput= function(){
            if(input.value <= 0){
                input.value = 1;
                alert('数量不能为小于1')
            }
        }
        let oSpan = document.querySelectorAll(".particulars-number>span");
        // ——  购物数量不能小于1
        oSpan[0].onclick = function () {
            let oInputs = document.querySelectorAll(".particulars-number>input");
            var i = Number(oInputs[0].value);
            if (i <= 1) {
                i = 1;
                alert('本商品1件起售')
            } else {
                i--;
            }
            oInputs[0].value = i;
        }
        // +  
        oSpan[1].onclick = function () {
            let oInputs = document.querySelectorAll(".particulars-number>input");
            console.log(oInputs);
            var i = Number(oInputs[0].value);
            i++;
            oInputs[0].value = i;

        }
        // 加入购物车
        let Btn = document.querySelectorAll('.particulars-btn>input');
        Btn[1].onclick = function () {
            let oInputs = document.querySelector(".particulars-number>input")
            let pnum = oInputs.value
            console.log(pnum);
            let url = 'http://jx.xuzhixiang.top/ap/api/add-product.php';
            axios.get(url, {
                params: {
                    pid: pid, //商品id
                    pnum: pnum,
                    uid: uid
                }
            }).then(res => {
                // console.log(res.data)
                console.log(res);
            })
            // 跳转至购物车
            location.href = "shopping-cart.html"
        }
    }
}
listfn()







